<template>
  <div id="app">
    <!-- 使用 v-slot 获取路由组件并包裹在 <transition> 中 -->
    <router-view v-slot="{ Component }">
      <Header />
      <transition name="v" mode="out-in">
        <component :is="Component" />
      </transition>
      <Footer />
    </router-view>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from "@/components/Footer.vue";
</script>

<style>
/* 全局样式 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 过渡动画样式 */
.v-enter-active,
.v-leave-active{
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to{
  opacity: 0;
}
</style>
